<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div class="layout w-full h-full box-border bg-white p-[20px]">
        <!-- 筛选区域 -->
        <div class="search box-border pb-[20px]">
          <a-row>
            <a-col :span="12">
              <span class="flex justify-start items-center">
                <a-input class="search-item" v-model="filterData.report_number" placeholder="请输入报告编号"
                  style="width: 328px" allow-clear @blur="getTableData" @clear="getTableData">
                  <template #suffix>
                    <a-link type="primary">
                      <icon-search @click="getTableData" class="cursor-pointer" />
                    </a-link>
                  </template>
                </a-input>
                <a-button class="ml-2 bg-[#E5EFFE!important] cursor-pointer" @click="moreFilterKey = !moreFilterKey">
                  <template #icon>
                    <icon-filter style="color: #1459fa" />
                  </template>
                </a-button>
              </span>
            </a-col>
            <a-col :span="12" class="flex justify-end">
              <a-button type="primary" @click="updateReport"> 上传报告 </a-button>
            </a-col>
          </a-row>
          <div
            class="more-fliter-box w-full h-[80px] mt-[20px] mb-0 p-[20px] pl-[10px] pr-[10px] box-border bg-[#F7F9FC]"
            v-if="moreFilterKey">
            <a-row class="w-full h-[40px] overflow-hidden" style="align-items: center;" justify="center">
              <a-col :span="6">
                <a-input class="search-item" v-model="filterData.report_name" placeholder="请输入" allow-clear
                  @change="getTableData">
                  <template #prefix> 报告名称 </template>
                </a-input>
              </a-col>
              <a-col :span="6">
                <a-input class="search-item" v-model="filterData.uploader_name" placeholder="请输入" allow-clear
                  @change="getTableData">
                  <template #prefix> 上传人 </template>
                </a-input>
              </a-col>
              <a-col :span="6">
                <a-range-picker class="search-item" v-model="filterData.dateRange" @change="getTableData"
                  style="width: 100%">
                  <template #prefix> 上传日期 </template>
                </a-range-picker>
              </a-col>
              <a-col :span="6">
                <a-link @click="resetFilter">重置</a-link>
              </a-col>
            </a-row>
          </div>
        </div>
        <!-- 表格区域 -->
        <div class="table-box w-full overflow-hidden" :style="{
          height: 'auto',
          maxHeight: moreFilterKey ? 'calc(100% - 192px)' : 'calc(100% - 92px)'
        }">
          <CommonTable :tableData="listData" :columnsData="columns" :operatorData="operatorData" :pageTotal="page.total"
            :operatorCollapse="2" @handlerOperator="handlerOperator" @handlerPaginationChange="handlerPaginationChange">
          </CommonTable>
        </div>
      </div>
    </template>
  </PageMain>
  <a-modal v-model:visible="removePopKey" title-align="start" class="chunk-delete-box" width="448px">
    <template #title>
      <span class="confirm-pop">是否确认删除该资源</span>
    </template>
    <div class="chunk-delete-info-box info-pop">
      <icon-exclamation-circle-fill class=" text-yellow-500" />
      删除后该资源无法恢复
    </div>
    <template #footer>
      <div class="w-full h-full flex justify-end items-center">
        <a-button @click="removePopKey = false">取消</a-button>
        <a-button type="primary" class="ml-2" @click="toRemove">删除</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { columns, operatorData } from './values'
import { useRouter } from 'vue-router';
import * as api from '@/api/data_evaluation/assessment_report/assessment_report'

const router = useRouter()

const filterData = ref({
  report_number: '',
  report_name: '',
  uploader_name: '',
  dateRange: [],
})

const page = ref({
  page: 1,
  page_size: 10,
  total: 0
});
const moreFilterKey = ref(false); // 更多筛选

const removePopKey = ref(false); // 删除弹窗

const currentRow = ref({}); // 当前行数据

// table表格数据
const listData = ref([]); // 表格数据

/* 获取数据列表 */
const getTableData = async () => {
  let start_date = '', end_date = '';
  if (filterData.value.dateRange) {
    start_date = filterData.value.dateRange[0];
    end_date = filterData.value.dateRange[1];
  } else {
    start_date = '';
    end_date = '';
  }
  let params = {
    page: page.value.page,
    page_size: page.value.page_size,
    report_number: filterData.value.report_number,
    report_name: filterData.value.report_name,
    uploader_name: filterData.value.uploader_name,
    upload_start_date: start_date,
    upload_end_date: end_date,
  };
  let res = await api.evaluationList(params);

  listData.value = res.data;
  page.value.total = res.total;
}

/* 重置 */
const resetFilter = () => {
  filterData.value = {
    code: '',
    name: '',
    uploadName: '',
    dateRange: [],
  }
  page.value.page = 1
  getTableData()
}

/* 上传报告 */
const updateReport = () => {
  router.push({
    name: 'dataUploadReport'
  })
}

/* 列表操作 */
const handlerOperator = (record: any, key: string) => {
  if (key.label == '查看报告') {
    resourceView(record)
  } else if (key.label == '删除') {
    resourceDelete(record)
  }
}

/* 查看报告 */
const resourceView = (record: Object) => {
  router.push({
    name: 'dataCheckReport',
    query: {
      id: record.id
    }
  })
}

/* 删除 */
const resourceDelete = (record: Object) => {
  removePopKey.value = true;
  currentRow.value = record;
}
/* 确认删除 */
const toRemove = () => {
  listData.value = listData.value.filter(item => item.id !== currentRow.value.id)
  removePopKey.value = false;
}

/* 分页方法 */
const handlerPaginationChange = (type: String, pageSize: number) => {
  if(type == 'size'){
    page.value.page_size = pageSize;
    page.value.page = 1;
  }else{
    page.value.page = pageSize;
  }
  getTableData()
}

onMounted(() => {
  getTableData()
})
</script>

<style lang="less" scope>
@import '../index.less';
</style>